<template>
  <div>
    <el-upload class="avatar-uploader" action="" :show-file-list="true" :before-upload="beforeAvatarUpload"
      :http-request="uploadAttachments" :file-list="fileList" :on-remove="handleRemove">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>

import axios from "axios";
const URL = require("../utils/request").default.baseURL
const defaultUrl = URL + 'api/server/publish/uploadImg';
export default {
  props: {
    value: {
      type: Array,
      default:()=>[]
    }
  },
  data () {
    return {
      uploadUrl: '',
      fileInfos: '',
      fileList: []
    }
  },

  methods: {
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 100
      if (isLt2M) {
        return isLt2M;
      }
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    uploadAttachments (params) {
      const form = new FormData();
      form.append('file', params.file);
      const uploadUrl = defaultUrl
      axios.post(uploadUrl, form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      }).then(response => {
        if (response.data.errno == 0) {
          this.fileInfos = response.data.data
          this.fileList.push({
            name: this.fileInfos.alt,
            url: this.fileInfos.url
          })
          this.value.push({
            originName: this.fileInfos.alt,
            newName: this.fileInfos.href,
            fileUrl: this.fileInfos.url
          })
          this.$emit('input', this.value)
        }
        this.$message.success(response.data.msg);
      }).catch(error => {
        console.log(error);
        this.$message.error("上传失败:" + error);
      })
    },
  },
  mounted () {
    this.pdfUrl = this.value
  }
}
</script>

<style scoped lang="scss"></style>
